<template>
    <div class="my-list">
        <header>
            <button @click="goBack">返回</button>
        </header>
        <div class="message">{{ message }}</div>
        <ul>
            <li v-for="item in songList">
                <!-- {{ item }} -->
                <div class="img-box">
                    <loading-image :pic="item.al.picUrl"></loading-image>
                    <!-- <img v-if="item.al.picUrl" :src="item.al.picUrl" alt=""> -->
                </div>
                <router-link :to="{path:'/songdetail?id='+ item.id+'&rid='+rid}">
                    <h4 class="left">{{ item.name }}</h4>
                    <p>{{ item.str }}</p>
                    <p>{{ item.publishTime | formaTime }}</p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
@import '../../static/style/variable.scss';
.my-list {
    .message {
        padding: .4rem .2667rem;
        border-bottom: 1px solid #ccc;
    }
    header {
        height: 1.6rem;
        line-height: 1.6rem;
        padding: 0 .2667rem;
        background-color: $bgColor;
        position: relative;
        button {
            background-color: transparent;
            border: 1px solid transparent;
            padding: .1333rem .2667rem;
            color: #fff;
            font-size: 16px;
        }
    }

    h3 {
        padding: 50px 0;
        background-color: #f0f0f0;
        text-align: center;
        text-align: center;
    }
    ul {
        li {
            min-height: 1.8667rem;
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: .2667rem;
            border-bottom: 1px solid #ccc;
            padding: 0 .2667rem .1333rem;
            .img-box {
                width: 1.6rem;
                height: 1.6rem;
                border-radius: 5px;
                margin: 0 .2667rem 0 0;
                text-align: center;
                overflow: hidden;
            }
            a {
                width: 100%;
            }

            p {
                padding: .1333rem 0 0 0 ;
                font-size: .4rem;
                color: #666;
                &:nth-of-type(1){
                    font-size: 13px;
                }
            }
        }
    }
}
</style>

<script>
// import { addTopDetail } from '@/request';
import { addPlayDetail } from '@/request';
import moment from 'moment';
import LoadingImage from '@/components/loading-image.vue';

export default {
    name:'top-list',
    components: {LoadingImage },
    data() {
        return {
            songList: [],
            page: 0,
            pageSize: 10,
            rid: '',
            message:''
        }
    },
    filters: {
        formaTime(value) {
            return moment(value).format('YYYY-MM-DD hh:mm:ss')
        }
    },
    watch:{
        // rid(n,o){
        //     console.log(n)
        //     // this.getTopDetail(n);
        // },
        // 监听路由变化
        $route:{
            deep: true,
            handler(n,o){
                this.rid = n.params.id;
                this.getPlayDetail(this.rid);
            }
        }
    },
    created() {
        this.rid = this.$route.query.id;
        this.message = this.$route.query.name;
        console.log(this.rid,'xxx',this.message)
        this.getPlayDetail(this.rid);
    },
    methods: {
        async getPlayDetail(id) {
            console.log({id})
            await addPlayDetail({ id }).then(
                content => {
                    console.log(content)
                    if (content.code == 200) {
                        let { playlist: { trackIds, tracks } } = content
                        let arr = tracks.map((item, i) => {
                            let { al, ar, name, publishTime , id} = item;
                            let str = '';
                            // console.log(ar);
                            if(Array.isArray(ar)){
                                ar.forEach(opt=>{
                                    str += opt.name+' / '
                                })
                                str = str.substring(0,str.length-2);
                            }
                            return { al, ar, name, publishTime ,str , id};
                        })
                        // 截取是10条记录
                        let start = this.page * this.pageSize;
                        let end = start + this.pageSize;
                        // console.log(arr.slice(start, end))
                        this.songList = arr.slice(start, end);
                    }
                }
            )
        },
        goBack(){
            this.$router.go(-1);
        }
    }
}
</script>